<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解说帝</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="public/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css" href="public/webuploader/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="public/webuploader/bootstrap-theme.min.css">
    <script src="public/admin/js/jquery.min.js"></script>
<script src="public/webuploader/webuploader.min.js"></script>
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
            border: 1px solid #c0c0c0;
        }
        .webuploader-pick{
            background:none;
        }
    </style>
</head>
<body>
    <!--用来存放item-->
   <!-- <div id="fileList" class="uploader-list"></div>-->
    <div id="filePicker"><img class="layui-upload-img" ></div>
    <div id="fileList1" class="uploader-list1"></div>
    <div id="filePicker1"><img class="layui-upload-img" ></div>
        <!--用来存放文件信息-->
        <div id="thelist" class="uploader-list"></div>
        <div class="btns">
            <div id="picker">选择文件</div>
            <!--<button id="ctlBtn" class="btn btn-default">开始上传</button>-->
        </div>

</body>
<script>
    var uploader = WebUploader.create({
        // swf文件路径
        swf: 'public/webuploader/Uploader.swf',
        auto: true,
        duplicate:true,
        formData: {upload_path:'/uploads/ad'},
        // 文件接收服务端。
        server: 'http://jieshuodiapi.com/image.php',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#picker',
        //chunked : false, // 是否分片
        //duplicate:true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
       // chunkSize : 52428 * 100, // 分片大小， 5M
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false
    });
    $('.webuploader-pick').css('background','#00b7ee');
    $list = $('#thelist');
    // 当有文件被添加进队列的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.append( '<div id="' + file.id + '" class="item">' +
            '<h4 class="info">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>' );
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress .progress-bar');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%;">' +
                '</div>' +
                '</div>').appendTo( $li ).find('.progress-bar');
        }

        $li.find('p.state').text('上传中');

        $percent.css( 'width', percentage * 100 + '%' );
    });
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).find('p.state').text('已上传');
    });

    uploader.on( 'uploadError', function( file ) {
        $( '#'+file.id ).find('p.state').text('上传出错');
    });

    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').fadeOut();
    });
    var state = 'pending';
    $('#ctlBtn').on( 'click', function() {
        if ( state === 'uploading' ) {
            uploader.stop();
        } else {
            uploader.upload();
        }
    });
</script>
<script>
    // 图片上传demo
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;
        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,
            formData: {upload_path:'/uploads/ad'},
            compress:false,

            // swf文件路径
            swf: 'public/webuploader/Uploader.swf',
            resize : false,// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            chunked : false, // 是否分片
            duplicate:true,//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
            //chunkSize : 52428 * 100, // 分片大小， 5M
            // 文件接收服务端。
            server: 'http://jieshuodiapi.com/image.php',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png,webp',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            /*var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img src="https://avatars1.githubusercontent.com/u/1575056?v=4" style="width: px;height: px">' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );*/
            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $('#filePicker img').replaceWith('<span>不能预览</span>');
                    return;
                }

                $('#filePicker img').attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ,response) {
            //$( '#'+file.id ).addClass('upload-state-done');
            //$('#filePicker img').addClass('upload-state-done');
            if(response.code==0 && response.path){
                alert(response.msg);
            }else{
                alert(response.msg);
            }
        });

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    });
    jQuery(function() {
        var $ = jQuery,
            $list = $('#fileList1'),
            // 优化retina, 在retina下这个值是2
            ratio = window.devicePixelRatio || 1,

            // 缩略图大小
            thumbnailWidth = 100 * ratio,
            thumbnailHeight = 100 * ratio,

            // Web Uploader实例
            uploader;
        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,
            formData: {id1:1},
            compress:false,

            // swf文件路径
            swf: 'public/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: 'http://jieshuodiapi.com/image.php',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker1',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png,webp',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            /*var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img src="https://avatars1.githubusercontent.com/u/1575056?v=4" style="width: px;height: px">' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');

            $list.append( $li );*/
            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $('#filePicker1 img').replaceWith('<span>不能预览</span>');
                    return;
                }

                $('#filePicker1 img').attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%' );
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');

            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<div class="error"></div>').appendTo( $li );
            }

            $error.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>
</html>